import React from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import _ from 'lodash';

import { Form } from '@ant-design/compatible';
import PageHeader from '@/components/PageHeader';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import { Card, Descriptions } from 'antd';

import '@ant-design/compatible/assets/index.css';

const events = {
  deliver: '投递',
  pickup: '取件',
  retrieve: '取回',
  problem_handle: '问题件',
};

const errers = {
  1: 'api错误',
  2: '接口返回失败',
  3: '接口异常',
  4: '无需同步',
};

const status = {
  1: '成功',
  2: '失败',
};

const { Item } = Descriptions;

interface LogProps extends FormComponentProps {
  dispatch: Dispatch;
  location: { query: any };
  detail: any;
  loading: boolean;
}

@connect(({
  logisCenterLogDetail: { detail },
  loading,
}: any) => ({
  detail,
  loading: loading.effects['logisCenterLogDetail/fetch'],
}))

class LogDetail extends React.Component<LogProps> {
  componentDidMount() {
    this.fetchLogDetail();
  }

  fetchLogDetail = () => {
    const { dispatch, location: { query } } = this.props;
    dispatch({
      type: 'logisCenterLogDetail/fetch',
      payload: query,
    });
  }

  render() {
    const { detail } = this.props;
    return (
      <>
        <PageHeader />
        <Card bordered={false} title="">
          <Descriptions bordered size="small">
            <Item label="快递公司">{detail.expressName || '--'}</Item>
            <Item label="运单号">{detail.expCode}</Item>
            <Item label="事件类型">{events[detail.event]}</Item>
            <Item label="错误类型">{errers[detail.errorType] || '--'}</Item>
            <Item label="错误消息">{detail.error || '--'}</Item>
            <Item label="推送时间">{detail.pushTime}</Item>
            <Item label="状态">{status[detail.status]}</Item>
            <Item label="失败原因">{detail.faildReason || '--'}</Item>
            <Item label="返回时间">{detail.responseTime}</Item>
            <Item label="返回数据">{detail.response}</Item>
          </Descriptions>
        </Card>
      </>
    );
  }
}

export default Form.create<LogProps>()(LogDetail);
